<template>
  <div>
    <Card>
      <el-row style="margin-bottom: 10px">
        <el-button size="small" type="primary" @click="addOrder">新增</el-button>
        <el-button size="small" type="success">修改</el-button>
        <el-button size="small" type="warning">删除</el-button>
      </el-row>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
              @on-delete="handleDelete"/>
      <el-pagination style="float: right; margin-top:10px" :page-size="10"
        background
        layout="prev, pager, next"
        :total="4">
      </el-pagination>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
    <Modal v-model="modalVisible" :title="'费用新增'" @on-ok="ok" @on-cancel="cancel">
      <div style="margin-bottom: 10px;">
        <el-input placeholder="深圳" v-model="newAddOrder.clubAddress">
          <template slot="prepend">职场</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="0" v-model="newAddOrder.clubNum">
          <template slot="prepend">俱乐部人数</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="0" v-model="newAddOrder.clubFee">
          <template slot="prepend">经费/人</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="0" v-model="newAddOrder.totalFee">
          <template slot="prepend">总经费</template>
        </el-input>
      </div>
      <div style="margin-bottom: 10px;">
        <el-input placeholder="" v-model="newAddOrder.feeYear">
          <template slot="prepend">年度</template>
        </el-input>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'

export default {
  name: 'feerule_page',
  components: {
    Tables
  },
  data () {
    return {
      newAddOrder: {},
      contentObj: {},
      modalVisible: false,
      columns: [
        { title: '职场', key: 'clubAddress', sortable: true },
        { title: '俱乐部人数', key: 'clubNum', editable: true },
        { title: '经费/人', key: 'clubFee' },
        { title: '总经费', key: 'totalFee' },
        { title: '年度', key: 'feeYear' }
      ],
      tableData: [
        {
          'clubId': '101101',
          'clubNum': 271,
          'clubAddress': '深圳',
          'clubFee': 250,
          'totalFee': 120000,
          'feeYear': 2021
        },
        {
          'clubId': '101101',
          'clubNum': 100,
          'clubAddress': '上海',
          'clubFee': 250,
          'totalFee': 40000,
          'feeYear': 2021
        },
        {
          'clubId': '101101',
          'clubNum': 100,
          'clubAddress': '杭州',
          'clubFee': 250,
          'totalFee': 25000,
          'feeYear': 2021
        },
        {
          'clubId': '101101',
          'clubNum': 300,
          'clubAddress': '武汉',
          'clubFee': 250,
          'feeYear': 2021,
          'totalFee': 75000
        }
      ]
    }
  },
  computed: {
    content () {
      return this.contentObj
    }
  },
  methods: {
    handleDelete (params) {

    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    addOrder () {
      this.modalVisible = true
    },
    ok () {
      this.tableData.push(this.newAddOrder)
    },
    cancel () {

    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data
    // })
  }
}
</script>

<style>

</style>
